<template>
  <div class="login">
    <div class="logo">
      <img src="@/assets/img/logo.png" />
    </div>
    <div class="main">
      <h1>换电站管理系统</h1>
      <h2>HUANDIANZHANGUANLIXITONG</h2>
      <div class="loginform">
        <span>用户登录</span>
        <el-form
          class="loginbox clearfix"
          :model="loginform"
          ref="loginruleform"
          :rules="loginrules"
        >
          <el-form-item prop="userid">
            <el-input
              class="name"
              v-model="loginform.userid"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              class="psd"
              placeholder="请输入密码"
              v-model="loginform.password"
              @keydown.native.enter="login"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <a @click="login">登录</a>
      </div>
    </div>
  </div>
</template>


<script>
import router from "../../router";
import routemap from "../../assets/js/routemap";
export default {
  name: "login",
  data() {
    return {
      loginform: {
        userid: "",
        password: "",
      },
      loginruleform: {
        userid: "",
        password: "",
      },
      loginrules: {
         //{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },//长度
        userid: [{ required: true, message: "账号不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    login() {
      //登录请求
      let params = {
        accounts: this.loginform.userid,
        password: this.loginform.password,
      };
      this.$refs.loginruleform.validate(async (valid) => {
        if (valid) {            
          let res = await this.$http.post("/user/login", params);

 
          if (res.data.h.code == 0) {

            let token = res.data.b.token;
            let userinfo = res.data.b.userInfo;

            // console.log("zytoken_"+token);
            // console.log("zyuserinfo_"+JSON.stringify(userinfo));// json字符串
            sessionStorage.setItem("token", token);
            sessionStorage.setItem("userinfo", JSON.stringify(userinfo));
            sessionStorage.setItem("LoginUser", true);//用作告警推送
            sessionStorage.setItem("push", true);//放到全局会话中，除非页面关闭就消失掉

            let userRoutes = await this.$store.dispatch("getMenu");//菜单放到了store中  存在内存中，刷新会消除掉
            let menu = userRoutes.data.b;
            //console.log("zymenu_"+JSON.stringify(userRoutes.data.b));
            sessionStorage.setItem("menu", JSON.stringify(menu));

            if (userRoutes.code == 0) {
              userRoutes.data.b.map((item) => {
                item.component = "";
                item.path = "";
                item.name = "";
                item.hiden = false;
              });//z增加这些属性，并初始化值
               
              //console.log("zy_"+JSON.stringify(serRoutes.data.b));
              userRoutes.data.b.map((item) => {
                for (let i in item) {
                  if (i == "name") {
                    item[i] = item.resKey;
                  }
                  if (i == "path") {
                    item[i] = "/" + item.resKey;
                  }
                  if (i == "component") {
                    item[i] = item.resKey;
                  }
                }
              });
              let newRoutes = userRoutes.data.b.filter((item) => item.parentId); //取出子页
              let userRoute = await routemap.getRouterList(newRoutes);//动态获取路由，初始化路由
             
              // console.log("zynewRoutes_"+newRoutes);
              // console.log("zy_"+userRoute);
              // console.log("zynewRoutes_"+JSON.stringify(newRoutes));
              // console.log("zyuserRoute_"+JSON.stringify(userRoute));

              router.addRoutes(
                userRoute.concat({
                  path: "*",
                  redirect: "/404",
                  hidden: true,
                  component: () => import("@/views/Notfound/404"),
                })
              );
              this.$router.push({ path: "/" });
            }
          }
        } else {
         //vue, element 弹出消息提示($message)的简写方式：
         // this.$message.warning('密码不能为空')
          this.$message({
            message: "请输入账号密码",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>


<style scoped>
html,
body {
    /* background: rgb(241, 6, 6); */
  height: 100%;
  width: 100%;
}
.login {
  height: 100%;
  width: 100%;
  background: url("../../assets/img/banner.png") no-repeat;
  background-size: cover;
  /* 默认是static */
  position: relative;
}

 .logo {
  position: absolute;
  right: 118px;
  top: 97px;
}
.logo img {
  width:190px;
  }
  .main {
  position: fixed;
  width: 630px;
  /* 22% */
  bottom: 12%;
  right: 11%;
  padding: 20px;
  box-sizing: border-box;
  /* background: transparent; */
    /* background: rgb(241, 6, 6); */
   
}

.main h1 {
  font-size: 30px;
  text-align: center;
  letter-spacing: 10px;
  margin-bottom: 14px;
  /* https://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.html */
    /* 线性渐变在 Mozilla 下的应用
    background: -moz-linear-gradient( top,#ccc,#000);

    线性渐变在 Webkit 下的应用
    比如 left top（左上角）和left bottom（左下角）
    background: -webkit-gradient(linear,left  top,left  bottom,from(#ccc), to(#000));
  
   三、线性渐变在 Opera 下的应用
   background: -o-linear-gradient(top,#ccc, #000); */

   background: linear-gradient(0deg, #009ff1 0%, #00e8cf 100%);
  
  /* -webkit-background-clip: text;意思是，以盒子内的文字作为裁剪区域向外裁剪，
  文字之外的区域都将被裁剪掉 */
  -webkit-background-clip: text;

  /* 填充元素的文字颜色就用-webkit-text-fill-color进行设置就好。 */
   -webkit-text-fill-color: transparent;
}

.main h2 {
  font-size: 24px;
  text-align: center;
  color: #00bff4;
  letter-spacing: 5px;
}


.loginform {
  margin-top: 14px;
  width: 100%;
  /* top开始 */
  padding: 45px 48px 0 48px;
  /* 整个盒子宽度包括，padding和变框宽度 */
  box-sizing: border-box;
  height: 438px;
  background: url("../../assets/img/box.png") no-repeat;
  background-size: 100% 100%;
}

.loginform span {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  color: #00bff4;
  letter-spacing: 20px;
}

.loginbox {
  background: transparent;
}
.loginbox /deep/ .el-form-item__content .el-input .el-input__inner {
  background: transparent !important;
}
.el-input {
  margin-top: 25px;
  padding-left: 30px;
  border: 3px solid rgba(32, 163, 245, 0.4);
}
.el-input /deep/ .el-input__inner {
  border: 0;
  background: transparent;
  color: #fff !important;
}
.name {
  background: url("../../assets/img/user.png") no-repeat;
   /* 左边和上边 */
  background-position: 14px 8px;
}
.psd {
  background: url("../../assets/img/psd.png") no-repeat;
  background-position: 14px 8px;
}
.loginform a {
  margin-top: 25px;
  text-align: center;
  background: url("../../assets/img/btn.png") no-repeat;
  color: #fff;
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  letter-spacing: 20px;
  font-size: 20px;
    /* background: rgb(241, 6, 6); */
} 


</style>
